@(qcmForm: Form[Qcm])
@header()

@import helper._

@implicitFieldConstructor = @{ FieldConstructor(twitterBootstrapInput.render) } 

@main("createQcm") {
	  
    @form(routes.AdminQcm.saveQcm()) {
    	<div class="bs-docs-example" >
    	
    	<div class="bs-docs-example-after" >
    	Etape 1 sur 1
    	</div>
     
     	<legend> Ajouter un qcm </legend>
     	
        <fieldset>
        <br>
        @select(
                qcmForm("utilisateur.idUtilisateur"), 
                options(Utilisateur.options), 
                '_label -> "Nom de l'auteur du QCM", '_default -> "-- Choisir un utilisateur --",
                '_showConstraints -> false
            )
        
            @inputText(qcmForm("libelle"), '_label -> "Libelle du QCM")

            @inputText(qcmForm("cleAuthentification"), '_label -> "cle d authentification du QCM")

    		@input(
    				qcmForm("dateCreation"),
    				'_label -> "Date de creation du Qcm", '_showConstraints -> false) { (_, name, value, _) =>
				    <div class="control-group ouv input-append date" id="datetimepicker">
				     		<div class="controls">
				        		<input type="text" id="dateCreation" name ="dateCreation" value="" required>
				        		<span class="add-on">
									<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
					    		</span>
				      		</div>
				      	</div>
				 
    	    }
    		
    
    		@input(
    				qcmForm("dateOuverture"),
    				'_label -> "Date d'ouverture du QCM", '_showConstraints -> false) { (_, name, value, _) =>
				    <div class="control-group ouv input-append date" id="datetimepicker2">
			     		<div class="controls">
			        		<input type="text" id="dateOuverture" name ="dateOuverture" value="" required>
			        		<span class="add-on">
								<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
				    		</span>
			      		</div>
			    </div>
				 
    	    }
    
		@input(
			qcmForm("dateCloture"),
			'_label -> "Date de fermeture du QCM", '_showConstraints -> false) { (_, name, value, _) =>
			  <div class="control-group ouv input-append date" id="datetimepicker3">
	     		<div class="controls">
	        		<input type="text" id="dateCloture" name ="dateCloture" value="" required>
	        		<span class="add-on">
						<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
		    		</span>
	      		</div>
	    </div>
		 
    }
            

        </fieldset>
            
            
        <br>
        
        <div class="actions">
        <a href="@routes.AdminQcm.indexQcm()" class="btn btn-primary"><i class="icon-white icon-circle-arrow-left"></i> Retour</a>
    	<button type="submit" class="btn btn-primary"> Ajouter <i class="icon-white icon-circle-arrow-right"></i> </button>
        </div>
       </div>
    }
<script type="text/javascript">
$('#datetimepicker').datetimepicker({
format: 'dd/MM/yyyy hh:mm'
});
</script>

<script type="text/javascript">
$('#datetimepicker2').datetimepicker({
format: 'dd/MM/yyyy hh:mm'
});
</script>

<script type="text/javascript">
$('#datetimepicker3').datetimepicker({
format: 'dd/MM/yyyy hh:mm'
});
</script>
    
}